<template>
  <div>
    <div>
      <Carousel/>
    </div>

    <div class="my_article">
      <el-row>
        <el-col :span="20">
          <el-row :gutter="20">
            <el-col  v-for="(item,index) in articleList" :key="index" :span="12">
              <ArticleDetail :article="item"/>
            </el-col>
          </el-row>
        </el-col>

        <el-col v-if="articleList.length === 0 " :span="20">
          <el-empty  description="暂无内容" />
        </el-col>

        <el-col :span="4" >
          <ArticleNavi style="padding-right: 5%" :sendLabelId="getLabelId"/>
        </el-col>
      </el-row>
    </div>

    <div>
      <el-row>
        <el-col :span="24">
          <Paging :articleTotal="articleTotal" :send-current="getCurrent" :send-size="getSize" style="padding-right: 17%;margin-bottom: 20px"/>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script setup >
import Carousel from '@/components/carousel/Carousel.vue'
import Notice from "@/components/notice/Notice.vue";
import ArticleNavi from "@/components/articleNavi/ArticleNavi.vue";
import ArticleDetail from "@/components/articleDetil/ArticleDetail.vue";
import Paging from "@/components/paging/Paging.vue";
import {getArticleByLabelId, getArticleByTitle} from "@/api/article";
import {nextTick, onMounted, onUnmounted, ref} from "vue";
import emitter from "@/utils/emitter.js";
const title = ref(null)
const articleList = ref([])
const articleTotal = ref(0)
const query = ref({
  id:null,
  pageCurrent:1,
  pageSize:5,
})

function getCurrent(current){
  query.value.pageCurrent = current
  sendPageParam()
  if (title.value == null){
    //正常根据文章标签搜索
    getArticle()
  }else {
    //如果有文章标题，根据文章标题搜索
    getByTitle()
  }
}

async function getSize(size){
  query.value.pageSize = size
  sendPageParam()
  if (title.value == null){
    //正常根据文章标签搜索
    await getArticle()
  }else {
    //如果有文章标题，根据文章标题搜索
    await getByTitle()
  }
}

async function getByTitle(){
  const pagePar = {
    pageCurrent:query.value.pageCurrent,
    pageSize:query.value.pageSize,
    title:title.value
  }

  const {data} =  await getArticleByTitle(pagePar)

  articleList.value = data.rows
  articleTotal.value = data.total
}

function sendPageParam(){
  const pagePar = {
    pageCurrent: query.value.pageCurrent,
    pageSize: query.value.pageSize,
  }
  //初始化的时候将分页参数传递给搜索框组件
  emitter.emit('send-pageParam',pagePar)

}
//得到子组件传递的标签id 子组件初始化的时候就会调用此方法
function getLabelId(labelId){
  query.value.id = labelId
  title.value = null
  //点击文章标签时将搜索文章的标题移除
  emitter.emit('remove-title')
  getArticle()
}

//获取文章列表
function getArticle(){
  getArticleByLabelId(query.value).then((response) =>{
    articleList.value = response.data.rows
    articleTotal.value = response.data.total
    if (articleList.value === undefined){
      articleList.value = []
    }
  })
}

//绑定事件 类似于事件监听
emitter.on('send-articleList',(res)=>{
  //接收搜索框根据文章标题而得到的数据
  articleList.value = res.data.rows
  articleTotal.value = res.data.total
  title.value = res.title
})
onUnmounted(()=>{
  emitter.off('send-articleList')
})

sendPageParam()
</script>
<style scoped>
.my_article{
  margin-top: 30px;
}
</style>